<template>
  <div class="myShezhi">
    <title1 tit="个人设置"></title1>
    <div class="myShezhi-one">
      <van-cell title="头像" is-link />
      <!-- style=' border-top-left-radius:5px ; border-top-right-radius:5px' -->
      <van-cell title="昵称" is-link value="蓝叶兰" />
      <!-- style=' border-bottom-right-radius:5px ; border-bottom-left-radius:5px' -->
      <img src="../../../assets/head.jpg" alt="" />
    </div>
    <div class="myShezhi-two">
      <van-cell title="证件信息" is-link />
      <van-cell title="资质信息" is-link />
      <van-cell title="学历信息" is-link />
    </div>

    <div class="myShezhi-three">
      <van-cell title="账号信息管理" is-link />
    </div>
    <div class="myShezhi-four">
      <van-cell title="关于我们" is-link />
    </div>
    <button class="btn3" @click="loginOut">退出登录</button>
  </div>
</template>
 
<script>
import title1 from "../../../components/tit.vue";

export default {
  data() {
    return {};
  },
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "Mine" });
    },
    loginOut(){
      // 点击退出登录,将store里的userId,token,xiangqinGoodsId都还原为初始值,将localStorage里的myToken删除
      this.$store.state.token ='';
      this.$store.state.userId ='';
      this.$store.state.xiangqinGoodsId ='';
      window.localStorage.removeItem("myToken");
      // 然后跳转到登录页
      this.$router.replace({name:'login'})
    }
  },
};
</script>

<style scoped lang="less">
.myShezhi {
  width: 100%;
  height: 100%;
  background-color: #ebebeb;
  .myShezhi-one {
    width: 700px;
    border: 1px solid #ccc;
    text-size-adjust: 16px;
    box-shadow: 0px 0px 1px 0px #ccc;
    border-radius: 50%;
    margin: 30px 20px;
    .van-cell {
      border-top: 1px solid #ccc;
    }
    img {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 595px;
      top: 175px;
      border-radius: 50%;
    }
  }
  .myShezhi-two {
    width: 700px;
    border: 1px solid #ccc;
    margin: 20px 20px;
    .van-cell--clickable {
      border-top: 1px solid #ccc;
    }
  }
  .myShezhi-three {
    width: 700px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 20px 20px;
  }
  .myShezhi-four {
    width: 700px;
    border: 1px solid #ccc;
    text-size-adjust: 16px;
    box-shadow: 0px 0px 1px 0px #ccc;
    border-radius: 5px;
    margin: 10px 20px;
  }
  .btn3 {
    border: 3px solid #ff5654;
    width: 700px;
    text-align: center;
    height: 90px;
    border-radius: 5px;
    margin: 30px 0 0 20px;
    background-color: #ff5654;
    color: #fff;
    font-size: 30px;
  }
}
</style>